<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>留言板</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .message-board {
      width: 500px;
      background-color: #007f00;
    }

    .message-board .write {
      position: relative;
      margin-bottom: 10px;
      height: 260px;
      background-color: #fe7e50;
    }

    .message-board .write #content {
      margin-left: 50px;
    }

    .message-board .write .anonymous {
      position: absolute;
      right: 20px;
    }

    .message-board .write button {
      position: absolute;
      right: 20px;
      width: 45px;
    }

    .message-board ul {
      list-style: none;
      background-color: #fe7e50;
    }
  </style>
</head>

<body>
  <div class="message-board">
    <div class="write">
      昵称：<input type="text" class="name"><br>
      <textarea id="content" cols="50" rows="10"></textarea><br>
      <div class="anonymous"><input type="checkbox">匿名</div><br>
      <button>发表</button>
    </div>
    <ul></ul>
  </div>
  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
    let $name = $(".name");
    let $content = $("#content");
    let $check = $("input:checkbox");
    let $btn = $("button");
    let $ul = $("ul");

    $btn.click(function () {
      let nowTime = new Date();
      let h = nowTime.getHours();
      h = h >= 12 ? '下午' + (h - 12) : '上午' + h;
      let m = nowTime.getMinutes();
      m = m < 10 ? '0' + m : m;
      let s = nowTime.getSeconds();
      s = s < 10 ? '0' + s : s;
      let time = h + ':' + m + ':' + s;
      if ($name.val() === '' || $content.val() === '') {
        alert('昵称和内容不能为空');
        // return false;
      } else if ($check.prop('checked') == true) {
        let $li = $("<li></li>");
        $li.html('路人甲 ' + time + '<br>' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + $content.val());
        $ul.append($li);
      } else {
        let $li = $("<li></li>");
        $li.html($name.val() + ' ' + time + '<br>' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + $content
          .val());
        $ul.append($li);
      }
    })
  </script>
</body>

</html>